<script setup lang="ts">
// import { ref } from 'vue'
import MaterialSymbolsDelete from '~icons/material-symbols/delete'
import HeroiconsPlayPauseSolid from '~icons/heroicons/play-pause-solid'
import HeroiconsPlayPause from '~icons/heroicons/play-pause'
import MdiRemoveBoxOutline from '~icons/mdi/remove-box-outline'
import IconParkSuccess from '~icons/icon-park/success'
import IconParkPauseOne from '~icons/icon-park/pause-one'
import IconParkPlayOne from '~icons/icon-park/play-one'
import AkarIconsEdit from '~icons/akar-icons/edit';
import IconParkViewList from '~icons/icon-park/view-list'
import Diff from './diff.vue'
let tempData: any = ref('')
let eventData: any = ref(null)
let isnew: any = ref(false)
let editIndex: any = ref(null)
let isEdit: any = ref(false)
const dialogOpen = ref(false)
const router = useRouter()
const route = useRoute()
const my_modal_5 = ref()
onMounted(() => {
  getData(true)
})
const getData = (isStart: any) => {
  chrome.storage.local.get(['tempData'], (res) => {
    // console.log('tempData', res.tempData)
    tempData.value = res.tempData
    if (tempData.value) {
      console.log('tempData', tempData)
      isnew.value = true
      dialogOpen.value = true
    }
    // const isNew = route.query.create
    // if (isNew && isStart) {
    //   console.log('tempData', tempData)
    //   isnew.value = true
    //   dialogOpen.value = true
    // }
  })
  chrome.storage.local.get('eventData', (res) => {
    console.log('eventData', res.eventData)
    eventData.value = res.eventData
  })
}
const clearTempData = () => {
  // alert('clearTempData')
  editIndex.value = null
  isEdit.value = false
  chrome.storage.local.set({tempData: null}, () => {
    tempData.value = null;
    getData(false)
  })
}
const addMonitor = () => {
  console.log('提交', tempData.value, isEdit)
  if (isEdit.value) {
    return editMonitor(editIndex.value)
  }
  tempData.value.monitor = true
  chrome.runtime.sendMessage({ event: 'addMonitor', data: tempData.value })
  dialogOpen.value = false
  setTimeout(() => {
    clearTempData()
  }, 800)
}
const startMonitor = (index: number) => {
  chrome.runtime.sendMessage({ event: 'startMonitor', data: index })
  dialogOpen.value = false
  setTimeout(() => {
    getData(false)
  }, 800)
}
const deleteMonitor = (index: number) => {
  chrome.runtime.sendMessage({ event: 'deleteMonitor', data: index })
  setTimeout(() => {
    getData(false)
  }, 800)
}
const pauseMonitor = (index: number) => {
  chrome.runtime.sendMessage({ event: 'pauseMonitor', data: index })
  setTimeout(() => {
    getData(false)
  }, 800)
}
const clearMonitor = () => {
  chrome.runtime.sendMessage({ event: 'clearMonitor' })
  setTimeout(() => {
    getData(false)
  }, 800)
}
const clearEvent = () => {
  chrome.runtime.sendMessage({ event: 'clearEvent' })
  setTimeout(() => {
    getData(false)
  }, 800)
}
const openEdit = (index: number, item: any) => {
  editIndex.value = index
  isEdit.value = true
  tempData.value = item
  dialogOpen.value = true
}
const editMonitor = (index: number) => {
  deleteMonitor(index)
  isEdit.value = false
  dialogOpen.value = false
  setTimeout(() => {
    addMonitor()
  }, 800)
}
</script>

<template>
  <div class="rounded-card h-full flex justify-center items-center main-bg">
    <!-- <Diff/> -->
    <div
      class="flex flex-col self-start"
      v-if="eventData && eventData.length"
    >
      <div class="constrol pr-0 py-2 flex justify-end gap-x-4">
        <button
          class="btn btn-warning"
          @click="clearMonitor"
        >
          <HeroiconsPlayPauseSolid />
          暂停全部
        </button>
        <div
          class="tooltip"
          data-tip="DELETE ALL"
        >
          <button
            class="btn btn-error"
            @click="clearEvent"
          >
            <MdiRemoveBoxOutline />
          </button>
        </div>
      </div>
      <table class="table w-full">
        <!-- head -->
        <thead class="bg-base-400">
          <tr>
            <th>监控标题</th>
            <th>监控页面</th>
            <th>间隔(秒)</th>
            <th>状态</th>
            <th>监控内容</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="(item, index) in eventData"
            :key="index"
          >
            <td>{{ item.monitorName }}</td>
            <td>
              <a
                :href="item.url"
                target="_blank"
                class="link"
              >
                {{ item.title }}
              </a>
            </td>
            <td>
              {{ item.monitorInterval * 1.5 }}
            </td>
            <td>
              <IconParkSuccess v-if="item.monitorStatus" />
              <IconParkPauseOne v-else />
            </td>
            <td class="max-w-xl">
              <div
                class="tooltip"
                :data-tip="item.innerHTML"
              >
                <div v-html="item.outerHTML"></div>
                <!-- {{ item.innerHTML.slice(0, 200) }} -->
              </div>
            </td>
            <td class="flex gap-x-2">

              <button
                class="btn btn-neutral"
                @click="openEdit(index, item)"
              >
                <AkarIconsEdit />
              </button>
              <button
                class="btn btn-primary"
                @click="pauseMonitor(index)"
                v-if="item.monitorStatus"
              >
                <HeroiconsPlayPause />
                暂停
              </button>
              <button
                class="btn btn-success"
                @click="startMonitor(index)"
                v-else
              >
                <IconParkPlayOne />
                启动
              </button>
              <!-- <button
                class="btn btn-neutral"
                @click="openDiff(index)"
              >
                <IconParkViewList />
              </button> -->
              <button
                class="btn btn-neutral"
                @click="deleteMonitor(index)"
              >
                <MaterialSymbolsDelete />
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <Empty v-else />
  </div>
  <dialog
    id="my_modal_1"
    v-if="dialogOpen"
    class="modal dark:text-white"
    :class="{ 'modal-open': dialogOpen }"
  >
    <div class="modal-box">
      <div class="form-control w-ful">
        <label class="label">
          <span class="label-text">页面内容：</span>
        </label>
        <div class="stack">
          <div class="card bg-base-200 w-full text-center shadow-md">
            <div v-html="tempData.outerHTML"></div>
          </div>
        </div>
        <!-- <div class="stack">
          <div class="card bg-base-200 w-full text-center shadow-md">
            <div class="card-body">{{ tempData.outerHTML }}</div>
          </div>
        </div> -->
      </div>
      <div class="form-control w-full max-w-xs">
        <label class="label">
          <span class="label-text">监控标题：</span>
        </label>
        <input
          v-model="tempData.monitorName"
          type="text"
          placeholder="Type here"
          class="input-bordered input w-full max-w-xs"
        />
      </div>
      <div class="form-control w-full max-w-xs">
        <label class="label">
          <span class="label-text">监控间隔：</span>
        </label>
        <input
          type="range"
          min="0"
          max="100"
          value="5"
          class="range"
          step="1"
          v-model="tempData.monitorInterval"
        />
        <div class="flex w-full justify-between px-2 text-xs">
          <span>0秒</span>
          <span>30秒</span>
          <span>60秒</span>
          <span>90秒</span>
          <span>120秒</span>
          <span>150秒</span>
        </div>
      </div>
      <div class="form-control w-52">
        <label class="label cursor-pointer">
          <span class="label-text">启动页面并固定标签页(防止误关闭页签)</span>
          <input
            v-model="tempData.pintab"
            type="checkbox"
            class="toggle-secondary toggle"
            checked
          />
        </label>
      </div>
      <div class="modal-action">
        <label
          @click="dialogOpen = false, clearTempData()"
          class="btn"
        >
          取消
        </label>
        <label
          @click="addMonitor"
          class="btn btn-success"
        >
          保存并启动~
        </label>
      </div>
    </div>
  </dialog>
  <!-- <div>{{ eventData }}</div> -->
</template>

<style scoped></style>
